<template>
	<view class="detail">
		<view class="top">
			<view class="charts">
				<canvas style="width: 100%; height: 100%;" type="2d" id="homeownerCanvas"
					class="homeowner-canvas_charts"></canvas>
			</view>
			<!-- 进度条 -->
			<view class="progress">
				<view class="progressItem" v-for="(item,index) in progressData" :key="index">
					<text class="text">{{item.name}}</text>
					<progress :percent="item.percent" stroke-width="3" :activeColor="item.color" />
					<text class="text">{{item.currentProgress}} / {{item.overallProgress}}</text>
				</view>
			</view>
		</view>
		<view class="center">
			<view class="dietTime" v-if="breakfast.length>0">
				<view class="time">
					<image class="image" src="/static/icon/breakfast.png" mode="aspectFit"></image>
					<text class="text">早餐</text>
				</view>
				<view class="foodList" v-for="(item,index) in breakfast" :key="index">
					<view class="left">
						<image :src="item.food_img" mode="aspectFill" class="image"></image>
						<view class="content">
							<text class="name">{{item.food_name}}</text>
							<view class="detailtext">
								<text class="des">总量:{{item.number+item.unit}}</text>
								<text class="des">碳水:{{item.carbohydrate+item.unit}}</text>
								<text class="des">蛋白质:{{item.protein+item.unit}}</text>
								<text class="des">脂肪:{{item.fat+item.unit}}</text>
							</view>
						</view>
					</view>
					<view class="caloric">
						{{item.caloric}}大卡
					</view>
				</view>
			</view>
			<view class="dietTime" v-if="lunch.length>0">
				<view class="time">
					<image class="image" src="/static/icon/lunch.png" mode="aspectFit"></image>
					<text class="text">午餐</text>
				</view>
				<view class="foodList" v-for="(item,index) in lunch" :key="index">
					<view class="left">
						<image :src="item.food_img" mode="aspectFill" class="image"></image>
						<view class="content">
							<text class="name">{{item.food_name}}</text>
							<view class="detailtext">
								<text class="des">总量:{{item.number+item.unit}}</text>
								<text class="des">碳水:{{item.carbohydrate+item.unit}}</text>
								<text class="des">蛋白质:{{item.protein+item.unit}}</text>
								<text class="des">脂肪:{{item.fat+item.unit}}</text>
							</view>
						</view>
					</view>
					<view class="caloric">
						{{item.caloric}}大卡
					</view>
				</view>
			</view>
			<view class="dietTime" v-if="dinner.length>0">
				<view class="time">
					<image class="image" src="/static/icon/dinner.png" mode="aspectFit"></image>
					<text class="text">晚餐</text>
				</view>
				<view class="foodList" v-for="(item,index) in dinner" :key="index">
					<view class="left">
						<image :src="item.food_img" mode="aspectFill" class="image"></image>
						<view class="content">
							<text class="name">{{item.food_name}}</text>
							<view class="detailtext">
								<text class="des">总量:{{item.number+item.unit}}</text>
								<text class="des">碳水:{{item.carbohydrate+item.unit}}</text>
								<text class="des">蛋白质:{{item.protein+item.unit}}</text>
								<text class="des">脂肪:{{item.fat+item.unit}}</text>
							</view>
						</view>
					</view>
					<view class="caloric">
						{{item.caloric}}大卡
					</view>
				</view>
			</view>
		</view>
		<ppc-loading v-if="loading" :isSmall="true"></ppc-loading>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		getCurrentInstance,
	} from 'vue';

	import {
		onReady,
		onLoad
	} from '@dcloudio/uni-app'
	import canvas from '../../tools/canvas.js'
	import ppcLoading from '/components/ppcLoading.vue'
	const {
		proxy
	} = getCurrentInstance()
	const caloric = ref(0)
	const loading = ref(false)
	const diet = ref([])
	//早餐信息
	const breakfast = ref([])
	//午餐信息
	const lunch = ref([])
	//晚餐信息
	const dinner = ref([])
	const canvasData = ref([{
			"value": 0.333333,
			"color": "#FC8452",
			"title": "碳水"
		},
		{
			"value": 0.333333,
			"color": "#91CB74",
			"title": "蛋白质"
		},
		{
			"value": 0.333333,
			"color": "#FAC858",
			"title": "脂肪"
		}
	])
	const carbohydrate = ref(0)
	const protein = ref(0)
	const fat = ref(0)
	//进度条信息
	const progressData = reactive([{
		name: "碳水(g)",
		percent: 0,
		color: "#FC8452",
		currentProgress: 0,
		overallProgress: uni.getStorageSync("userInfo").carbohydrate
	}, {
		name: "蛋白质(g)",
		percent: 0,
		color: "#91CB74",
		currentProgress: 0,
		overallProgress: uni.getStorageSync("userInfo").protein
	}, {
		name: "脂肪(g)",
		percent: 0,
		color: "#FAC858",
		currentProgress: 0,
		overallProgress: uni.getStorageSync("userInfo").fat
	}])
	onReady(() => {
		const instance = getCurrentInstance()
		let query = uni.createSelectorQuery().in(instance).select(`#homeownerCanvas`).fields({
			node: true,
			size: true
		}).exec(res => {
			const width = res[0].width
			const height = res[0].height
			canvas.canvasGraph('homeownerCanvas', canvasData.value, caloric.value, instance, (height -
					20) / 3,
				(height / 3))
		})
	})
	onLoad(async (option) => {
		let ids = []
		const temp_breakfast = JSON.parse(option.data).breakfast
		const temp_lunch = JSON.parse(option.data).lunch
		const temp_dinner = JSON.parse(option.data).dinner
		if (temp_breakfast) {
			temp_breakfast.forEach(item => {
				ids.push(item.foodId)
				caloric.value += item.caloric
			})
		}
		if (temp_lunch) {
			temp_lunch.forEach(item => {
				ids.push(item.foodId)
				caloric.value += item.caloric
			})
		}
		if (temp_dinner) {
			temp_dinner.forEach(item => {
				ids.push(item.foodId)
				caloric.value += item.caloric
			})
		}
		if (ids.length > 0) {
			loading.value = true
			proxy.$http('getFoodDetails', {
				ids: ids
			}).then(res => {
				if (temp_breakfast) {
					temp_breakfast.forEach(item => {
						breakfast.value.push(res.result.data.data.filter(items =>
							items._id == item.foodId)[0])
					})
					breakfast.value.forEach(item => {
						carbohydrate.value += item.carbohydrate
						protein.value += item.protein
						fat.value += item.fat
					})
				}
				if (temp_lunch) {
					temp_lunch.forEach(item => {
						lunch.value.push(res.result.data.data.filter(items =>
							items._id == item.foodId)[0])
					})
					lunch.value.forEach(item => {
						carbohydrate.value += item.carbohydrate
						protein.value += item.protein
						fat.value += item.fat
					})
				}
				if (temp_dinner) {
					temp_dinner.forEach(item => {
						dinner.value.push(res.result.data.data.filter(items =>
							items._id == item.foodId)[0])
					})
					dinner.value.forEach(item => {
						carbohydrate.value += item.carbohydrate
						protein.value += item.protein
						fat.value += item.fat
					})
				}
				progressData.forEach(items => {
					if (items.name == '碳水(g)') {
						items.currentProgress = carbohydrate.value
						items.percent = ((items.currentProgress / items.overallProgress) * 100)
							.toFixed(0)
					}
					if (items.name == '蛋白质(g)') {
						items.currentProgress = protein.value
						items.percent = ((items.currentProgress / items.overallProgress) * 100)
							.toFixed(0)
					}
					if (items.name == '脂肪(g)') {
						items.currentProgress = fat.value
						items.percent = ((items.currentProgress / items.overallProgress) * 100)
							.toFixed(0)

					}
				})
				const sum = carbohydrate.value + protein.value + fat.value
				canvasData.value.forEach(item => {
					if (item.title == '碳水') {
						item.value = (carbohydrate.value / sum)
					}
					if (item.title == '蛋白质') {
						item.value = (protein.value / sum)
					}
					if (item.title == '脂肪') {
						item.value = (fat.value / sum)
					}
				})
				loading.value = false
			})
		}
	})
</script>

<style lang="scss">
	.detail {
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 100vh;
		overflow-y: auto;
	}

	.top {
		background: #fff;
		height: 600rpx;
		width: 95%;
		border-radius: 20rpx;

		.charts {

			height: 70%;
			width: 100%;
		}

		.progress {
			height: 30%;

			display: flex;
			justify-content: space-around;
			margin: 5% 0rpx;

			.progressItem {
				margin: 0 16rpx;
				width: 25%;

				.text {
					font-size: 28rpx;
					color: #afafaf;
				}
			}
		}
	}

	.center {
		width: 95%;

		.dietTime {
			background: #fff;
			margin: 20rpx 0;
			border-radius: 20rpx;

			.time {
				display: flex;
				align-items: center;
				padding: 10rpx 0;
				box-shadow: 0 4rpx 8rpx 0 #f1f1f1;

				.image {
					margin: 0 20rpx;
					width: 60rpx;
					height: 60rpx;
				}

				.text {
					font-size: 32rpx;
					font-weight: bold;
				}
			}

			.foodList {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 14rpx 20rpx;
				border-bottom: 1px dashed #efefef;

				.left {
					display: flex;
					align-items: center;
				}

				.image {
					width: 100rpx;
					height: 100rpx;
				}

				.content {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: flex-start;
					margin-left: 20rpx;

					.name {
						font-size: 30rpx;
					}

					.detailtext {
						.des {
							font-size: 20rpx;
							color: #afafaf;
							margin: 0 4rpx;
						}
					}
				}

				.caloric {
					font-size: 28rpx;
					color: #afafaf;
				}
			}

			.foodList:last-child {
				border-bottom: none;
			}
		}
	}
</style>